<template>
	<view class="auto-page" style="background-color: #FFFFFF;">
		<view class="f-1 pic-list" v-if="data.length > 0">
			<view class="pic-container" v-for="(item, index) in data" :key="index" @click="pickPic(item.attachment_src)"
				:style="(info.picType == 'main_image' && pickData.image == item.attachment_src) ||
						(info.picType == 'slider_image' && pickData.slider_image.indexOf(item.attachment_src) !== -1) ?
						'border: 4rpx solid #df2000' : ''">
				<image class="pic" mode="aspectFill" :src="item.attachment_src" :lazy-load="true" @click="previewPic(item.attachment_src)"></image>
			</view>
			<view class="pic-container" v-show="(data.length%3) !== 0">
			</view>
			<loading-more :statusObject="statusObject" @reload="reload"></loading-more>
		</view>
		<view class="upload-icon click-opacity" @click="uploadPic"></view>
	</view>
</template>

<script>
	let _this;
	import loadingmore from '../../components/loading-more.vue';
	import OTHER from '../../api/other.js'
	export default {
		components: {
			loadingmore
		},
		data() {
			return {
				id: false,
				page: 1,
				limit: 18,
				data: [],
				statusObject: { status : 0},
				info: false,
				pickData: {
					image:'',
					slider_image: []
				}
			}
		},
		onLoad(options) {
			_this = this;
			_this.id = options.id;
			if(options) {
				_this.info = uni.getStorageSync('STORAGE_DATA');
				uni.removeStorageSync('STORAGE_DATA');
			}
			uni.setNavigationBarTitle({
				title: options.title
			});
		},
		onShow() {
			_this.requestData(_this.id);
		},
		onBackPress() {
			if(_this.info.picType == 'main_image') {
				uni.setStorageSync('STORAGE_DATA',_this.pickData.image);
			}else if(_this.info.picType == 'slider_image') {
				uni.setStorageSync('STORAGE_DATA',_this.pickData.slider_image);
			}
		},
		onReachBottom() {
			_this.requestData(_this.id);
		},
		methods: {
			reload() {
				_this.statusObject = { status: 0};
				_this.page = 1;
				_this.data = [];
				_this.requestData();
			},
			requestData(id) {
				let result;
				if(_this.statusObject.status == 1 || _this.statusObject.status == 2) return;
				OTHER.attachmentLst({ page: _this.page , limit: _this.limit , attachment_category_id: id}).then((res) => {
					_this.data = _this.data.concat(res.list);
					if (res.count == 0) {
						_this.statusObject = {
							status: 1
						};
					} else if ((_this.data.length == res.count && res.count !== 0) || res.list.length == 0) {
						_this.statusObject = {
							status: 2
						};
						_this.page += 1;
					} else {
						_this.statusObject = {
							status: 3
						};
						_this.page += 1;
					}
				}).catch((err) => {
					_this.statusObject = {
						status: -1
					};
					console.log(err);
				})
			},
			pickPic(src) {
				if(_this.info && _this.info.picType == 'main_image' && _this.pickData.image == '') {
					_this.pickData.image = src;
					console.log(_this.pickData);
				}else if (_this.info && _this.info.picType == 'slider_image' && _this.pickData.slider_image.length < _this.info.number) {
					if(_this.pickData.slider_image.indexOf(src) !== -1) {
						_this.pickData.slider_image.splice(_this.pickData.slider_image.indexOf(src),1);
					}
					else _this.pickData.slider_image.push(src);
					console.log(_this.pickData);
				}else if (_this.info && _this.info.picType == 'main_image' && src ==_this.pickData.image ) {
					_this.pickData.image = '';
				}
			},
			previewPic(url) {
				if(_this.info.picType == 'check_image')
				uni.previewImage({
					urls: [url]
				});
				else return;
			},
			uploadPic() {
				uni.chooseImage({
				  	count: 1,
				    sizeType: ['original', 'compressed'],
				    sourceType: ['camera','album'], //这要注意，camera掉拍照，album是打开手机相册
				    success: (res)=> {
						console.log(res);
						const tempFilePaths = res.tempFilePaths;
						uni.setStorageSync('STORAGE_DATA',{ picSrc: tempFilePaths })
						uni.navigateTo({
							url: '../upload/upload?id=' + _this.id
						});
			
				    }
				});
			}
		}
	}
</script>

<style>
	.pic-container{
		box-sizing: border-box;
		display: inline-block;
		width: 30vw;
		height: 30vw;
		justify-content: center;
		align-items: center;
		margin: 0 1vw;
	}
	.pic-list{
		padding-left: 2vw;
		padding-right: 2vw;
		padding-top: 15rpx;
		padding-bottom: 15rpx;
		display: flexbox;
		position: relative;
	}
	.pic{
		width: calc(30vw - 8rpx);
		height: calc(30vw - 8rpx);
	}
	.upload-icon{
		position: fixed;
		bottom: 0;
		right: 0;
		width: 100rpx;
		height: 100rpx;
		border-top-left-radius: 100rpx;
		background-color: #007AFF;
		z-index: 99;
	}
	.upload-icon::after{
		content: "";
		height: 50rpx;
		width: 6rpx;
		border-radius: 3rpx;
		position: absolute;
		background-color: #FFFFFF;
		bottom: 15rpx;
		right: 40rpx;
		transform: rotate(90deg);
	}
	.upload-icon::before{
		content: "";
		height: 50rpx;
		width: 6rpx;
		border-radius: 3rpx;
		position: absolute;
		background-color: #FFFFFF;
		bottom: 15rpx;
		right: 40rpx;
	}
</style>
